


// webpack 基本配置文件

// 打包    (入口 出口 环境配置 )
// 模块化开发

// JS / TS
// CSS / Less / Scss
// Png / Jpg
// json 
// Vue
// React 

// 服务器配置  devServer
// SourceMap
// Plugins 插件 

// 修改配置文件就要重启

const path = require("path")
const webpack = require('webpack')
const OpenBrowserPlugin = require('webpack-open-browser-plugin')
const htmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")   // 抽离样式 
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')   // 已经被遗弃 
const TerserPlugin = require('terser-webpack-plugin') // 压缩js代码

module.exports = {
    mode:"development",  // development 开发环境  production  生产环境   test 测试环境 
    entry:['./src/main.js'],  // 入口
    output:{
        path:path.resolve(__dirname,'dist'),  // 路径 
        filename:'./js/[name].[chunkhash:8].js', // 长度为 8 的随机加密字符串  
        publicPath:''
    },

    // 路径别名 
    resolve:{
        alias:{
            "@":path.resolve("src"),
            "~":path.resolve("src/utils")
        }
    },

    // 服务器配置 
    devServer:{
        host:"0.0.0.0",
        port:8000,
        open:false, 
        compress:true,
        hot:true,
        proxy:{  // 代理 

        },
        static: {
            directory: path.join(__dirname, 'public'),
        },
    },
    
    // 资源图 
    devtool:"source-map",   // 方便在线调试  

    // 模块配置 
    module:{
        rules:[
            {
                test:/\.(js|jsx|ts|tsx)$/,
                use:['babel-loader'],
                exclude:/node_modules/
            },
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader']
            },
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader']
            },
            {
                test:/\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        limit:8192,  // 8M
                        name:"imgs/[name].[hash:8].[ext]"  // 404.png => 404.qwer1234.png
                    }
                }
            }
        ]
    },

    // 插件 数组用法 
    plugins:[

        new webpack.HotModuleReplacementPlugin(),  // 热替换模块确定使用 

        new OpenBrowserPlugin({
            url:"http://localhost:8000"
        }),

        new htmlWebpackPlugin({
            template:'./public/index.html',  // 打包的html 文件路径 
            minify:true, // 压缩 
            inject:true , // 自动注入 JS 和 CSS
        }),

        // 抽离CSS
        new MiniCssExtractPlugin({
            filename:'css/[name].[chunkhash:8].css',
            chunkFilename:'css/[id].[chunkhash:8].css'
        }),

        new CleanWebpackPlugin(),  // 所要清理的文件夹名称

        // new UglifyJsPlugin({
        //     uglifyOptions: {
        //       compress: {
                
        //       }
        //     },
        //     sourceMap: true,  //是否启用文件缓存
        //     parallel: true   //使用多进程并行运行来提高构建速度
        // }),

        new webpack.DefinePlugin({
            DESCRIPTION: 'This Is The Test Text.',
        }),

        //提供全局的变量，在模块中使用无需用require引入 
        new webpack.ProvidePlugin({
            $: 'jquery',
            React: 'react', 
            Component:['react','Component'],
            axios:'axios',
            moment:'moment'
        }),
    ],

    // 优化 
    optimization: {
        minimizer: [
          new TerserPlugin({
            parallel: 4, // 开启几个进程来处理压缩，默认是 os.cpus().length - 1
            // cache: true, // 是否缓存
            // sourceMap: false,
          }),
        ]
    }
}
